<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h1{
            /* text-shadow: 20px 20px 2px red,20px -20px 2px green; */
            text-shadow: 20px 20px 2px red,20px -20px 2px green;
        }
        div{
            width: 200px;
            height: 200px;
            background: pink;
            /* box-shadow: 10px 10px 2px red inset,10px -10px 2px green */
            box-shadow: 10px 10px 2px red inset, 10px -10px 2px green ;
        }
    </style>
</head>
<body>
    <h1>祝国文螺丝厂生意兴隆~</h1>
    <div></div>
</body>
</html>
<!-- 
    文本阴影的使用
        属性:text-shadow
        属性值:常用的有4个
            - 第一个值:水平方向
            - 第二个值:垂直方向
            - 第三个值:模糊程度
            - 第四个值:文本阴影的颜色
        总结:
            - 代表水平垂直方向的值可以正数可以接负数
            - 文本阴影有多个的值的写法:只需要在后面添加一个逗号再写文本属性就可以了

    盒子阴影的使用
        属性:box-shadow
        属性值：
            - 盒子阴影还有第五个属性值 ，盒子阴影是长在外面的
            - inset 表示阴影长在盒子内的
            - 盒子阴影有多个的写法
 -->